<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>渐变文字效果</title>
    <style>
      * {
        user-select: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #000;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        gap: 60px;
        padding: 40px;
      }

      .gradient-text-1 {
        font-size: 72px;
        font-weight: bold;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        background-size: 200% 200%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradient-shift 3s ease infinite;
      }

      @keyframes gradient-shift {
        0%, 100% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
      }

      .gradient-text-2 {
        font-size: 72px;
        font-weight: bold;
        background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #f7b731, #ff6b6b);
        background-size: 300% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: rainbow 4s linear infinite;
      }

      @keyframes rainbow {
        0% {
          background-position: 0% 50%;
        }
        100% {
          background-position: 100% 50%;
        }
      }

      .gradient-text-3 {
        font-size: 72px;
        font-weight: bold;
        position: relative;
        color: transparent;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        background-clip: text;
        filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.5));
      }

      .gradient-text-4 {
        font-size: 72px;
        font-weight: bold;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: shimmer 2s linear infinite;
      }

      @keyframes shimmer {
        to {
          background-position: 200% center;
        }
      }
    </style>
  </head>
  <body>
    <h1 class="gradient-text-1">渐变文字 1</h1>
    <h1 class="gradient-text-2">彩虹文字</h1>
    <h1 class="gradient-text-3">发光文字</h1>
    <h1 class="gradient-text-4">闪烁文字</h1>
  </body>
</html>

